<template>
    <div class="coupon">
        <div class="biaoti">
            <img src="../../../assets/img/返回.png" alt="">
            <div class="youhui">优惠券</div>
        </div>
        <div class="neirong">
            <div class="first">优惠券</div>
            <div class="xinxi">
            <img src="../../../assets/img/信息.png" alt="">
            </div>
            <div class="guize">使用规则</div>
            <!-- 第一个div -->
            <div class="quan">
                <div class="ig">
                    <img src="../../../assets/img/coupon图标.png" alt="">
                </div>
                <div class="b1">现金消费抵用券</div>
                <div class="b2">有效期至</div>
                <div class="b3">2020-06-30</div>
                <div class="money">
                    <img src="../../../assets/img/money.png" alt="">
                    <div class="qian">100</div>
                    <div class="xiangqin">查看规则详情</div>
                </div>
            </div>
            <!-- 第二个div -->
            <div class="quan2">
                <div class="ig">
                    <img src="../../../assets/img/coupon图标.png" alt="">
                </div>
                <div class="b1">满减消费抵用券</div>
                <div class="b2">有效期至</div>
                <div class="b3">2020-06-30</div>
                <div class="money">
                    <img src="../../../assets/img/money.png" alt="">
                    <div class="qian">300</div>
                    <div class="xiangqin">查看规则详情</div>
                </div>
            </div>
            <!-- 第三个div -->
            <div class="quan3">
                <div class="ig">
                    <img src="../../../assets/img/coupon图标.png" alt="">
                </div>
                <div class="b1">单品折扣券</div>
                <div class="b2">有效期至</div>
                <div class="b3">2020-06-30</div>
                <div class="money">
                    <div class="qian7">7</div>
                    <div class="dian">.0</div>
                    <div class="zhe">折</div>
                    <div class="xiangqin2">查看规则详情</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {_getUserCoupon} from '../../../service/coupon.js'

export default{
    data(){
        return{

        }
    },
    mounted(){
        this.getdata()
    },
    methods:{
        getdata(){
            let _this=this
            let uid=JSON.parse(localStorage.getItem('user')).user_id
            _getUserCoupon(uid).then(res=>{
                console.log(res)
            })
        }
    }
}
</script>
<style>
.coupon{
    width: 100%;
    height: 100%;
}
.biaoti{
    height: 44px;
}
.biaoti img{
    width: 9px;
    height: 17px;
    margin: 13.5px 0 0 15px;
}
.youhui{
    width: 60px;
    height: 17px;
    margin: -23px 0 0 161px;
    font-size: 18px;
    font-weight: 1000;
}
.neirong{
    height: 100%;
    background-color: rgb(248,248,248);
}
.first{
    line-height: -55px;
    margin: 0 0 0 15px;
    font-size: 15px;
    padding-top: 27.5px;
    font-weight: 1000px;
}
.xinxi img{
    width: 12px;
    height: 12px;
    margin: -40px 0 0 284.3px;
}
.guize{
    width: 50px;
    height: 11.5px;
    font-size: 12px;
    margin: -37px 0 0 301.5px;
    color: rgb(174, 174, 174);
}
.quan{
    width: 345px;
    height: 74px;
    margin: 15px 0 0 15px;
    background-color: #fff;
    box-shadow:3px 3px  1px rgb(227, 227, 227);
}
.quan2{
    width: 345px;
    height: 74px;
    margin: 10px 0 0 15px;
    background-color: #fff;
    box-shadow:3px 3px  1px rgb(227, 227, 227);
}
.quan3{
    width: 345px;
    height: 74px;
    margin: 10px 0 0 15px;
    background-color: #fff;
    box-shadow:3px 3px  1px rgb(227, 227, 227);
}
.ig img{
    width: 24px;
    height: 18px;
    margin: 28px 0 0 28px;
}
.b1{
    margin: -35px 0 0 80px;
    font-size: 15px;
    font-weight:500;
}
.b2{
    margin: 10px 0 0 80px;
    font-size: 12px;
    color: rgb(102, 102, 102);
}
.b3{
    margin: -17px 0 0 130px;
    font-size: 12px;
    color: rgb(102, 102, 102);
}
.money img{
    width: 11px;
    height: 17px;
    margin: -85px 0 0 245.5px;
}
.qian{
    font-size: 36px;
    font-family: "DINPro Medium";
    margin: -82px 0 0 265px;
    color: rgb(51, 51, 51);
}
.qian7{
    font-size: 36px;
    font-family: "DINPro Medium";
    margin: -65px 0 0 265px;
    color: rgb(51, 51, 51);
}
.dian{
    margin: -35px 0 0 285px;
    font-family: "DINPro Medium";
    font-weight: 1000;
    color: rgb(51, 51, 51);
    font-size: 18px;
}
.zhe{
    margin: -19px 0 0 305px;
    font-weight: 1000;
    color: rgb(51, 51, 51);
}
.xiangqin{
    float: right;
    margin: -18px 16px 0 0;
    color: rgb(174, 174, 174);
}
.xiangqin2{
    float: right;
    margin: 2px 16px 0 0;
    color: rgb(174, 174, 174);
}
</style>